React Spring Boot Multiple File Upload Example (2024)

2024-06-18 19:47| 来源: 网络整理| 查看: 265

Refer React Multiple File Upload Example for full implementation with Source Code.

Spring Boot Upload Multiple File Implementation

Create Spring Boot Project from Spring Initializer site https://start.spring.io/

Project Structure

Maven Dependency

All we need is spring-boot-starter-web dependency in pom.xml, add org.projectlombok for auto generating getters/setters/constructor.

4.0.0 org.springframework.boot spring-boot-starter-parent 2.2.7.RELEASE com.techgeeknext spring-boot-upload-multiple-files-example 0.0.1-SNAPSHOT spring-boot-upload-multiple-files-example Spring Boot upload multiple files example 1.8 org.springframework.boot spring-boot-starter-web org.projectlombok lombok true org.springframework.boot spring-boot-maven-plugin RestController to upload multiple files

Create RestController class and define below rest endpoint:

POST method to Upload multiple files using MultipartFile[] files as a parameter. GET method to list all files from the file storage folder. package com.techgeeknext.controller; import com.techgeeknext.util.FileUtil; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.IOException; import java.nio.file.Files; import java.nio.file.Paths; import java.util.ArrayList; import java.util.Arrays; import java.util.List; @Controller //@CrossOrigin(origins = "http://localhost:8082") open for specific port @CrossOrigin() // open for all ports public class MultipleFilesUploadController { /** * Method to upload multiple files * @param files * @return FileResponse */ @PostMapping("/upload") public ResponseEntity uploadFiles(@RequestParam("files") MultipartFile[] files) { try { createDirIfNotExist(); List fileNames = new ArrayList(); // read and write the file to the local folder Arrays.asList(files).stream().forEach(file -> { byte[] bytes = new byte[0]; try { bytes = file.getBytes(); Files.write(Paths.get(FileUtil.folderPath + file.getOriginalFilename()), bytes); fileNames.add(file.getOriginalFilename()); } catch (IOException e) { } }); return ResponseEntity.status(HttpStatus.OK) .body(new FileUploadResponse("Files uploaded successfully: " + fileNames)); } catch (Exception e) { return ResponseEntity.status(HttpStatus.EXPECTATION_FAILED) .body(new FileUploadResponse("Exception to upload files!")); } } /** * Create directory to save files, if not exist */ private void createDirIfNotExist() { //create directory to save the files File directory = new File(FileUtil.folderPath); if (! directory.exists()){ directory.mkdir(); } } /** * Method to get the list of files from the file storage folder. * @return file */ @GetMapping("/files") public ResponseEntity getListFiles() { return ResponseEntity.status(HttpStatus.OK) .body( new File(FileUtil.folderPath).list()); } }

Refer Spring Boot Api's for Upload Multiple File Example for full implementation with Source Code.

Test Reactjs Spring Boot Multiple File Upload Example

Prerequisite : Start the Spring Boot Rest Api's application required for our react example. Use below command to install all the dependencies required for the project. npm install Run the application by using below command: npm start By default application will open in browser at http://localhost:3000/ url. Upload Files Choose File(s) and click on Upload button to upload the multiple/single files using rest endpoint. Check for File Exceeded Use big size file to validate for file exceeded validation. Download Source Code

The full source code for this article can be found below.

Download it here - Spring Boot Upload Multiple Files Example Download it here - React Upload Multiple Files Example

【本文地址】

公司简介

联系我们